import { Vue, Component } from 'vue-property-decorator'
import styles from './styles.less'
import TableTab from '@/components/TableTab'
import { Action } from 'vuex-class'
import { downloadFile } from '@/lib/utils'

const quickBtns = [
  {
    id: 0,
    name: '新领印章',
    description: '用户新申请电子印章',
    url: '/home/applyPage/newApply',
  },
  {
    id: 1,
    name: '我申请的印章',
    description: '查看用户已申请的<br/>所有电子印章',
    url: '/home/appliedForMe',
  },
  {
    id: 2,
    name: '我管理的印章',
    description: '查看用户可管理的<br/>所有电子印章',
    url: '/home/myManagingSeal',
  },
  {
    id: 3,
    name: '机构印章管理员申请',
    description: '用户可申请成为机构印章<br/>管理员管理电子印章',
    url: '/home/administratorApply/agencyAdministratorApply',
  },
  {
    id: 4,
    name: '组织机构信息更新',
    description: '用户可申请<br/>新增与更新组织机构信息',
    url: '/home/organizationManagement',
  },
  {
    id: 5,
    name: '我的订单',
    description: '查看申请中印章的<br/>物流状态',
    url: '/home/myOrderList/all',
  },
]

@Component({})
export default class First extends Vue {
  private tabsIndex = null

  private newsData = []

  private dowloadData = []

  private faqList: any[] = []

  @Action('homepage/queryFAQList') private queryFAQList!: any
  @Action('homepage/queryNewsList') private queryNewsList!: any
  @Action('homepage/queryResourceList') private queryResourceList!: any
  @Action('homepage/downloadResource') private downloadResource!: any

  protected render() {
    return (
      <div class={styles.helpView}>
        <header />
        <main>
          <div class={styles.left}>
            <div class={styles.quick}>
              <div class={styles.quickList}>
                {quickBtns.map((item: any) => {
                  return (
                    <div
                      class={styles.quickItem}
                      onClick={() => {
                        this.$router.push({ path: item.url })
                      }}
                    >
                      <p class={styles.icon}>
                        <img
                          src={require(`@/assets/quick-${item.id}.png`)}
                          width="79px"
                          height="79px"
                        />
                      </p>
                      <p class={styles.name}>{item.name}</p>
                      <p
                        class={styles.desc}
                        {...{ domProps: { innerHTML: item.description } }}
                      />
                    </div>
                  )
                })}
              </div>
              <div
                class={styles.more}
                onClick={() => {
                  this.$router.push({ name: 'home' })
                }}
              >
                <p class={styles.icon}>
                  <img
                    src={require(`@/assets/more.png`)}
                    width="79px"
                    height="79px"
                  />
                </p>
                <p class={styles.name}>更多</p>
                <p class={styles.desc}>点击查看更多功能</p>
              </div>
            </div>
            <TableTab
              title="常见问题"
              class={styles.tableTab}
              onMore={() => {
                this.$router.push({ name: 'faq' })
              }}
            >
              <div class={styles.content}>
                <ul>
                  {this.faqList.length > 0 ? (
                    this.faqList.map((item: any) => {
                      return (
                        <li>
                          <p class={styles.question}>
                            {item.title || <span>&nbsp;</span>}
                          </p>
                          <p class={styles.answer}>{item.content}</p>
                        </li>
                      )
                    })
                  ) : (
                    <div class={styles.empty}>暂无内容</div>
                  )}
                </ul>
              </div>
            </TableTab>
          </div>
          <div class={styles.right}>
            <TableTab
              class={{ [styles.supportTab]: true, [styles.tableTab]: true }}
              onMore={() => {
                window.open(`${window.location.origin}/support`, '_blank')
              }}
            >
              <template slot="title">{this.getSupportTitle}</template>
            </TableTab>
            <TableTab
              title="公告通知"
              class={styles.tableTab}
              onMore={() => {
                this.$router.push({ name: 'news' })
              }}
            >
              <ul class={styles.tabsContentBox}>
                {this.newsData.length > 0 ? (
                  this.newsData.map((doc: any, index: number) => {
                    return (
                      <a
                        onClick={() => {
                          this.toView(doc)
                        }}
                        title={doc.title}
                      >
                        <p class={styles.title}>{doc.title}</p>
                        <span class={styles.date}>
                          {(doc.publishTime || '').split(' ')[0]}
                        </span>
                      </a>
                    )
                  })
                ) : (
                  <div class={styles.empty}>暂无内容</div>
                )}
              </ul>
            </TableTab>
            <TableTab
              title="下载中心"
              class={styles.tableTab}
              onMore={() => {
                this.$router.push({ name: 'download' })
              }}
            >
              <ul class={styles.tabsContentBox}>
                {this.dowloadData.length > 0 ? (
                  this.dowloadData.map((doc: any, index: number) => {
                    return (
                      <a title={doc.title}>
                        <p>{doc.title}</p>
                        <img
                          src={require('@/assets/download.png')}
                          onClick={() => {
                            this.download(doc)
                          }}
                          width="14px"
                          height="14px"
                        />
                      </a>
                    )
                  })
                ) : (
                  <div class={styles.empty}>暂无内容</div>
                )}
              </ul>
            </TableTab>
          </div>
        </main>
      </div>
    )
  }

  private mounted() {
    this.getFAQ()
    this.getNews()
    this.getDownload()
  }

  private get getSupportTitle() {
    return (
      <p class={styles.tabTitle}>
        浙江省政府电子印章
        <br />
        更新和系统对接改造技术支持
      </p>
    )
  }

  private download(row: any) {
    this.downloadResource({ id: row.id }).then((res: any) => {
      if (!res) {
        this.$message.error('文件不存在')

        return
      }
      downloadFile(res, row.title)
    })
  }

  private toView(item: any) {
    this.$router.push({ name: 'newsDetail', query: { id: item.id } })
  }

  private getFAQ() {
    this.queryFAQList({ isTop: true, pageIndex: 1, pageNumber: 10 }).then(
      (res: any) => {
        this.faqList = res.list
      }
    )
  }

  private getNews() {
    this.queryNewsList({ isTop: true, pageIndex: 1, pageNumber: 10 }).then(
      (res: any) => {
        this.newsData = res.list
      }
    )
  }

  private getDownload() {
    this.queryResourceList({ isTop: true, pageIndex: 1, pageNumber: 10 }).then(
      (res: any) => {
        this.dowloadData = res.list
      }
    )
  }
}
